<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>天气可视化</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 10px;
        }

        #visualizationForm {
            max-width: 100%;
            margin: 0 auto;
            padding: 10px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        select, input[type="submit"] {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: #fff;
            cursor: pointer;
        }

        #chart {
            margin-top: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            width: 100%;
            height: 400px; /* 调整图表容器的高度适应移动设备 */
        }

        #loader {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        #loader img {
            width: 50px;
            height: 50px;
        }

        #loadingComplete {
            text-align: center;
            display: none;
        }

        #loadingComplete img {
            width: 50px;
            height: 50px;
        }

        #loadingComplete p {
            margin-top: 10px;
            font-weight: bold;
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <form id="visualizationForm">
        <label for="column_name">选择列名：</label>
        <select id="column_name" name="column_name">
            {% for column in columns %}
                <option value="{{ column }}">{{ column }}</option>
            {% endfor %}
        </select>

        <label for="chart_type">选择图表类型：</label>
        <select id="chart_type" name="chart_type">
            <option value="line">折线图</option>
            <option value="bar">柱状图</option>
            <option value="scatter">散点图</option>
            <option value="pie">饼图</option>
        </select>

        <input type="submit" value="生成图表">
    </form>

    <div id="chart">
        <div id="loader" style="display: none;">
            <img src="{{ url_for('static', filename='images/loading.gif') }}" alt="加载中..."> <!-- 加载动画的图片 -->
        </div>
        <!-- 图表将会在这里显示 -->
    </div>

    <!-- 加载完成提示 -->
    <div id="loadingComplete">
        <img src="{{ url_for('static', filename='images/finish.gif') }}" alt="加载完成！"> <!-- 加载动画的图片 -->
        <p>加载完成！</p>
    </div>

    <!-- 引入 Plotly.js 库 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

    <!-- 渲染图表 -->
    <script>
        document.getElementById('visualizationForm').addEventListener('submit', function(event) {
            event.preventDefault();

            var formData = new FormData(this);

            // 显示加载动画
            document.getElementById('loader').style.display = 'flex';

            // 隐藏加载完成提示
            document.getElementById('loadingComplete').style.display = 'none';

            fetch('/visual', {
                method: 'post',
                body: formData
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                // 隐藏加载动画
                document.getElementById('loader').style.display = 'none';

                // 显示加载完成提示
                document.getElementById('loadingComplete').style.display = 'block';

                var plotData = JSON.parse(data.plotData);
                var layout = {
                    title: data.title,
                    xaxis: {
                        type: 'category',
                        tickfont: { size: 10 },
                        tickangle: -45 // 设置 x 轴刻度标签字体大小为 10px
                    }
                };
                Plotly.newPlot('chart', plotData.data, layout);
            });
        });

        // 监听窗口大小改变事件
        window.addEventListener('resize', function() {
            // 重新渲染图表的大小
            Plotly.Plots.resize('chart');
        });
    </script>
</body>
</html>